<template>
  <page-meta :root-font-size="fontsize" class="rent-store">
    <xlNavBar title="招租转店" bgc="ff9d49" :showLeft="true"></xlNavBar>
    <view class="rs-header">
      <u-tabs
        :list="tabList"
        lineColor="#ff9d49"
        :current="currentTab"
        :activeStyle="{
          fontSize: '16px',
          fontWeight: '600',
          color: '#ff9d49'
        }"
        :inactiveStyle="{ fontSize: '14px' }"
        @change="handleTabChange"
      ></u-tabs>
      <view class="h-filter">
        <view class="h-f-distance" @click="handleAreaFilter">
          {{
            searchParam.filter.store_area
              ? areaOptions[searchParam.filter.store_area * 1].name
              : "面积"
          }}
          <i class="iconfont cyyouxia"></i>
        </view>
        <view
          class="h-f-area"
          v-if="currentTab !== 1"
          @click="handleCityFilter"
        >
          {{ getSelectCity[0]["fullname"] || "全国"
          }}{{ getSelectCity.length ? "·" + getSelectCity.length : "" }}
          <i class="iconfont cyyouxia"></i>
        </view>
      </view>
    </view>

    <template v-if="dataList.length > 0">
      <scroll-view class="rs-content" scroll-y @scrolltolower="handlePullLoad">
        <view
          class="c-container"
          @click="handleStoreDetail(item.id)"
          v-for="item in dataList"
          :key="item.id"
        >
          <view class="c-c-title">
            <span class="t-badge">招租/转店</span>
            {{ item.store_highlight }}
          </view>
          <view class="c-c-info">
            <view class="i-card">
              <view class="name">
                {{ item.monthly_rent }}
                <span class="unit">元/月</span>
              </view>
              <view class="text">
                {{
                  (item.monthly_rent / item.store_area / 30).toFixed(1)
                }}元/m²/天
              </view>
            </view>
            <view class="i-card">
              <view class="name">
                {{ item.store_area }}
                <span class="unit">m²</span>
              </view>
              <view class="text">面积</view>
            </view>
            <view class="i-card">
              <view class="name">
                {{
                  item.is_transfer_fee !== 1
                    ? "无转让费"
                    : item.is_show_transfer_fee === 1
                    ? (item.transfer_fee/10000).toFixed(2) + "万元"
                    : "面议"
                }}
              </view>
              <view class="text">转让费</view>
            </view>
          </view>
          <view class="c-c-image" v-if="item.store_image.length > 0">
            <image
              class="image"
              @click.stop="previewImage(index, item.store_image)"
              v-for="(img, index) in item.store_image"
              :key="img"
              :src="img"
              mode="aspectFill"
            />
          </view>
          <view class="c-c-address">
            <view class="a-info">
              <i class="iconfont cyweizhi"></i>
              <view class="address">{{ item.store_address }}</view>
              <text class="distance" v-if="currentTab === 1">
                {{ item.distance }}km
              </text>
              <text class="time">{{ item.show_time }}</text>
            </view>
            <view class="a-detail">
              详情
              <img class="a-icon" src="./image/icon-left.png" />
            </view>
          </view>

          <img
            class="c-c-top"
            v-if="item.is_top"
            src="./image/top-icon.png"
            mode="widthFix"
          />
        </view>
      </scroll-view>
    </template>
    <view v-else class="rs-null">
      <img class="image" src="https://canyinxinxi.cn/system_work/data-null.png" mode="scaleToFill" />
      <view class="info">抱歉，暂无店铺信息～</view>
    </view>

    <template v-if="getUserStatus && getUserStatus.storefront_status">
      <view class="rs-operate">
        <img
          class="image"
          mode="scaleToFill"
          @click="manageStore"
          src="https://canyinxinxi.cn/system_work/manage-icon.png"
        />
      </view>
    </template>
    <template v-else>
      <view class="rs-operate" v-if="showStoreIcon">
        <image
          class="image"
					src="https://canyinxinxi.cn/system_work/store-icon.png"
          mode="scaleToFill"
          @click="publishStore"
        />
        <img
          @click="showStoreIcon = false"
          class="close"
          src="./image/close-icon.png"
          mode="scaleToFill"
        />
      </view>
    </template>

    <u-popup
      :closeOnClickOverlay="true"
      @close="submitAreaFilter"
      :show="showAreaPopup"
      round="10px"
      mode="bottom"
    >
      <view class="area-popup">
        <view class="ap-header">
          <view class="title">请选择面积</view>
          <view class="operate" @click="submitAreaFilter">确认</view>
        </view>
        <view class="ap-content">
          <view
            class="option"
            @click="handleAreaOption(option)"
            :class="
              option.value === searchParam.filter.store_area
                ? 'option-active'
                : ''
            "
            v-for="option in areaOptions"
            :key="option.value"
          >
            {{ option.name }}
          </view>
        </view>
      </view>
    </u-popup>

    <selectCityPopup
      v-if="showCityPopup"
      type="select"
      @getData="getCityInfo"
      :max="3"
      :show="showCityPopup"
      @submit="submitCityInfo"
    ></selectCityPopup>
  </page-meta>
</template>

<script>
import { mapGetters } from "vuex";
import selectCityPopup from "./components/selectCityPopup.vue";

export default {
  name: "RentStore",
  data() {
    return {
      fontsize: "",
      currentTab: 0,
      finish: false,
      tabList: [
        {
          name: "推荐",
          type: 1
        },
        {
          name: "附近",
          type: 2
        },
        {
          name: "最新",
          type: 3
        }
      ],
      showStoreIcon: true,
      showCityPopup: false,
      showAreaPopup: false,
      areaOptions: [
        {
          name: "面积",
          value: ""
        },
        {
          name: "0~20平方米",
          value: "1"
        },
        {
          name: "20~50平方米",
          value: "2"
        },
        {
          name: "50~100平方米",
          value: "3"
        },
        {
          name: "大于100平方米",
          value: "4"
        }
      ],
      dataList: [],
      searchParam: {
        request_id: "",
        type: 1,
        filter: {
          city_codes: "",
          store_area: "",
          distance: null
        },
        longitude: null,
        latitude: null,
        page_size: 5,
        page_num: 1
      },
      total: 0
    };
  },
  components: {
    selectCityPopup
  },
  computed: {
    ...mapGetters("location", [
      "getSelectCity",
      "getCurProvince",
      "getUserLocationInfo"
    ]),
    ...mapGetters("user", ["getUserStatus"])
  },
  onLoad() {
    let designWidth = 37.5;
    uni.onWindowResize((res) => {
      this.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
    });
    uni.getSystemInfo({
      success: (res) => {
        this.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
      }
    });

    if (this.getSelectCity) {
      let city_codes = this.getSelectCity.map((item) => {
        return item.id;
      });

      this.searchParam.filter.city_codes = city_codes.join(",");
    }

    this.getList();
  },
  methods: {
    async getList() {
      if (this.finish) return;
      if (this.searchParam.page_num === 1) {
        this.dataList = [];
      }
      let res = await this.$http.requestSync(
        "/storefronts/list",
        this.searchParam
      );
      if (res.code === 200) {
        if (!res.storefronts) {
          return;
        }
        let storefronts = res.storefronts.map((item) => {
          return {
            ...item,
            store_image: item.store_image
              ? item.store_image.indexOf(",") > -1
                ? item.store_image.split(",")
                : [item.store_image]
              : []
          };
        });
        this.dataList = [...this.dataList, ...storefronts];
        this.total = res.total;

        if (this.dataList.length === this.total) {
          this.finish = true;
        }
      } else {
        this.$layer.message(res.message);
        this.dataList = [];
        this.total = 0;
      }
    },
    handlePullLoad() {
      if (this.dataList.length === 0) {
        return;
      }
      if (this.total > this.dataList.length) {
        this.searchParam.page_num = this.searchParam.page_num + 1;
        this.getList();
      }
    },
    handleTabChange(tab) {
      this.finish = false;
      this.currentTab = tab.index;
      if (tab.index === 1) {
        this.searchParam.filter.city_codes = "";
        this.searchParam.filter.distance = 10000;
        let userLocationInfo = this.getUserLocationInfo;
        this.searchParam.longitude = userLocationInfo.ad_info.location.lng;
        this.searchParam.latitude = userLocationInfo.ad_info.location.lat;
      } else {
        let city_codes = this.getSelectCity.map((item) => item.id);
        this.searchParam.filter.city_codes = city_codes.join(",");
        this.searchParam.filter.distance = null;
        this.searchParam.longitude = null;
        this.searchParam.latitude = null;
      }

      this.searchParam.type = this.tabList[tab.index].type;
      this.searchParam.page_num = 1;

      this.getList();
    },
    previewImage(index, imageList) {
      uni.previewImage({
        current: index,
        urls: imageList
      });
    },
    handleAreaFilter() {
      this.showAreaPopup = true;
    },
    handleAreaOption(item) {
      this.finish = false;
      this.showAreaPopup = false;
      this.searchParam.filter.store_area = item.value;
      this.searchParam.page_num = 1;

      this.getList();
    },
    submitAreaFilter() {
      this.showAreaPopup = false;
    },
    handleCityFilter() {
      this.showCityPopup = true;
    },
    getCityInfo(data) {
      this.finish = false;
      this.showCityPopup = false;
      let city_codes = data.map((item) => item.id);
      this.searchParam.filter.city_codes = city_codes.join(",");
      this.searchParam.longitude = null;
      this.searchParam.latitude = null;
      this.searchParam.page_num = 1;
      this.getList();
    },
    submitCityInfo() {
      this.showCityPopup = false;
    },
    handleStoreDetail(id) {
      this.$togo("/shopPackage/storeDetail?id=" + id);
    },
    manageStore() {
      this.$throttle(() => {
        this.$checkLogin(() => {
          this.$togo("/shopPackage/manageStore");
        });
      });
    },
    publishStore() {
      this.$throttle(() => {
        this.$checkLogin(() => {
          this.$togo("/shopPackage/publishStore");
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.rent-store {
  height: 100vh;
  background: #fff;
  display: block;
  .rs-header {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(180deg, #efefef 0%, #f7f7f7 100%);
    .h-filter {
      display: flex;
      align-items: center;
      .h-f-distance,
      .h-f-area {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        padding: 0 10px;
        background: #e8e8e8;
        border-radius: 4px;
        font-size: 12px;
        color: #999999;
        margin-right: 10px;
        .iconfont {
          position: absolute;
          right: 4px;
          bottom: 4px;
          font-size: 6px;
          width: 6px;
          height: 6px;
        }
      }
    }
  }
  .rs-content {
    height: calc(100vh - 116px);
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px 0;
    display: flex;
    flex-direction: column;
    .c-container {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 20px 10px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      border: 1px solid #dff0ff;
      border-radius: 10px;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
      background: #f9fcff;
      .c-c-title {
        font-size: 13px;
        color: #555555;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        .t-badge {
          padding: 4px 5px;
          margin-right: 4px;
          font-size: 10px;
          color: #2c9cfd;
          border-radius: 3px 3px 3px 3px;
          background: rgba(62, 166, 255, 0);
          border: 1px solid #2c9cfd;
        }
      }
      .c-c-info {
        display: flex;
        justify-content: space-around;
        margin: 15px 0;
        .i-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          .name {
            font-weight: 600;
            color: #2c9cfd;
            font-size: 18px;
            .unit {
              font-size: 12px;
            }
          }
          .text {
            margin-top: 5px;
            font-size: 10px;
            color: #999999;
          }
        }
      }
      .c-c-image {
        display: flex;
        margin-bottom: 10px;
        .image {
          margin-right: 10px;
          width: 76px;
          height: 76px;
          border-radius: 6px;
        }
      }
      .c-c-address {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid #e4e4e4;
        .a-info {
          display: flex;
          font-size: 11px;
          .iconfont {
            color: #2c9cfd;
          }
          .address {
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333333;
            margin-right: 5px;
          }
          .distance {
            padding: 0 5px;
            border-left: 1px solid #e4e4e4;
            color: #666666;
          }
          .time {
            padding-left: 5px;
            border-left: 1px solid #e4e4e4;
            color: #999999;
          }
        }
        .a-detail {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #2c9cfd;
          .a-icon {
            width: 14px;
            height: 14px;
          }
        }
      }
      .c-c-top {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 36px;
        height: 36px;
      }
    }
  }
  .rs-null {
    display: flex;
    flex-direction: column;
    align-items: center;
    .image {
      margin-top: 100px;
      width: 180px;
      height: 180px;
    }
    .info {
      margin-top: 10px;
      color: #999999;
    }
  }
  .rs-operate {
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 8;
    bottom: 58px;
    .image,
    image,
    uni-image {
      width: 174px;
      height: 70px;
    }
    .close {
      position: absolute;
      right: calc(50% - 66px);
      top: -16px;
      z-index: 9;
      width: 19px;
      height: 19px;
    }
  }
  .area-popup {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 25px 16px;
    .ap-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      .title {
        font-weight: 600;
        color: #333333;
      }
      .operate {
        color: #2c9cfd;
      }
    }
    .ap-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin-top: 20px;
      padding: 0 10px;
      .option {
        text-align: center;
        line-height: 48px;
        color: #999999;
        font-size: 16px;
        &.option-active {
          font-size: 20px;
          font-weight: 600;
          color: #2c9cfd;
          border-radius: 6px;
          background: rgba(44, 156, 253, 0.1);
        }
      }
    }
  }
}
</style>
